<template>
<div>
  <head title="Refund details"></head>
  <scroller class="wrap">
    <div class="wrap-top">
      <text class="wrap-top-tit">{{develyStatus}}</text>
      <text class="wrap-top-time" v-if="orderInfo.type=='1'">{{orderInfo.create_time|formatDateTime}}</text>
      <text class="wrap-top-time" v-if="orderInfo.type=='2'">{{orderInfo.agree_time|formatDateTime}}</text>
      <text class="wrap-top-time" v-if="orderInfo.type=='3'">{{orderInfo.send_time|formatDateTime}}</text>
      <text class="wrap-top-time" v-if="orderInfo.type=='4'">{{orderInfo.take_time|formatDateTime}}</text>
      <text class="wrap-top-time" v-if="orderInfo.type=='5'">{{orderInfo.co_send_time|formatDateTime}}</text>
      <text class="wrap-top-time" v-if="orderInfo.type=='6'">{{orderInfo.co_refund_time|formatDateTime}}</text>
    </div>
    <div class="wrap-con">
      <text class="wrap-con-tit">Refund details</text>
      <div class="wrap-con-det">
        <image class="wrap-con-img" :src="goodInfo.thumb" />
        <div class="wrap-con-cont">
          <text class="wrap-con-nam">{{goodInfo.title}}</text>
          <!-- <text class="wrap-con-lab">Brand new</text> -->
          <div class="wrap-con-box">
            <text class="wrap-con-symbol">AU$</text>
            <text class="wrap-con-money">{{goodInfo.price}}</text>
            <!-- <text class="wrap-con-ship">（Free shipping）</text> -->
          </div>
        </div>
      </div>
      <div class="wrap-con-msg">
        <text class="wrap-con-msgtit">Refund total：{{orderInfo.refund_price}}</text>
        <text class="wrap-con-item">Service type：{{refundType}}</text>
        <text class="wrap-con-item">Delivery status：{{develyStatus}}</text>
        <text class="wrap-con-item">Reason：{{orderInfo.refund_reason}}</text>
        <text class="wrap-con-item">Application time：{{orderInfo.create_time|formatDateTime}}</text>
      </div>
      <div class="wuliuMes" v-if="orderInfo.type==2&&orderInfo.refund_type-0!==1">
        <div class="inputBox">
          <text class="inputTit">Shipment number</text>
          <input class="inputCell" v-model="tracking_number" />
        </div>
        <div class="inputBox">
          <text class="inputTit">Delivery company</text>
          <text class="inputCell">Australia Post Tracking</text>
        </div>
      </div>
    </div>
  </scroller>
  <div class="bottom" v-if="orderInfo.type!=2">
    <text class="sureBtn" @click="push('root:app/msg/chat.js')">Contact seller</text>
  </div>
  <div class="confirmBox" v-if="orderInfo.type==2&&orderInfo.refund_type-0!==1">
    <text class="CancelBtn" @click="cancelOrder">Cancel</text>
    <text class="ConfirmBtn" @click="confirmOrder">Confirm</text>
  </div>
  <div class="dangerBar" v-if="isIpx"></div>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>
<script>
import {
  getRefundInfo,
  del_refund_info,
  add_refund_tracking
} from "../../../mixin/ajax.js";
import asCore from "../../../mixin/core";

export default {
  data() {
    return {
      users_id: "",
      order_id: "",
      tracking_number: "",
      logistics: "",
      shipper_code: "",
      orderInfo: {},
      userInfo: {},
      goodInfo: {}
    };
  },
  computed: {
    refundType() {
      let status;
      switch (this.orderInfo.refund_type - 0) {
        case 1:
          status = "Refund";
          break;
        case 2:
          status = "Refund & Exchange";
          break;
        case 3:
          status = "Exchange";
          break;
        default:
          status = "";
      }
      return status;
    },
    develyStatus() {
      let status;
      switch (this.orderInfo.type - 0) {
        case 1:
          status = "Waiting for seller confirmation";
          break;
        case 2:
          status = "Refund Approved";
          break;
        case 3:
          status = "Seller shipped";
          break;
        case 4:
          status = "Received";
          break;
        case 5:
          status = "Shipped";
          break;
        case 6:
          status = "After sale has been completed";
          break;
        default:
          status = "Waiting for seller confirmation";
      }
      return status;
    }
  },
  methods: {
    onLoad(parmar) {
      let that = this;
      if (parmar) {
        if (parmar.parmar) {
          return false;
        }
        if (parmar.goodInfo) {
          Object.assign(this.goodInfo, parmar.goodInfo);

          asCore.getBsessionid(userId => {
            that.users_id = userId;
            if (parmar.goodInfo.order_id || parmar.goodInfo.id) {
              this.order_id = parmar.goodInfo.order_id || parmar.goodInfo.id;
              that.getPageDetail(this.order_id);
            }
          });
        }
      }
    },
    cancelOrder() {
      let that = this;
      del_refund_info(
        { users_id: this.users_id, order_id: this.order_id },
        (res, flag) => {
          if (flag) {
            this.toast(res.message);
            if (res.code == 200) {
              setTimeout(() => {
                that.back();
              }, 500);
            }
          }
        }
      );
    },
    confirmOrder() {
      if (!this.tracking_number) {
        this.toast("Please enter tracking numbe");
        return false;
      }

      add_refund_tracking(
        {
          users_id: this.users_id,
          order_id: this.order_id,
          tracking_number: this.tracking_number,
          logistics: "Australia Post Tracking",
          shipper_code: "AUSTRALIA"
        },
        (res, flag) => {
          if (flag) {
            this.toast(res.message);
            if (res.code == 200) {
              setTimeout(() => {
                that.back();
              }, 500);
            }
          }
        }
      );
    },
    getPageDetail(id) {
      let that = this;
      that.isLoading = true;
      getRefundInfo({ users_id: this.users_id, order_id: id }, (res, flag) => {
        that.isLoading = false;
        if (flag) {
          if (res.code == 200) {
            this.orderInfo = Object.assign({}, this.orderInfo, res.data.refund);
            this.userInfo = Object.assign({}, this.userInfo, res.data.users);
          } else {
            this.toast(res.message);
            setTimeout(() => {
              that.back();
            }, 500);
          }
        }
      });
    }
  }
};
</script>
<style lang="less">
@import "./index.less";
.confirmBox {
  width: 750px;
  height: 80px;
  background-color: rgba(216, 216, 216, 1);
  flex-direction: row;
  align-items: stretch;
}
.dangerBar {
  height: 68px;
  background-color: rgba(216, 216, 216, 1);
  width: 750px;
}
.CancelBtn {
  flex: 1;
  text-align: center;
  font-size: 34px;
  height: 80px;
  line-height: 80px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  background-color: #ba8833;
}
.ConfirmBtn {
  flex: 1;
  text-align: center;
  font-size: 34px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 80px;
  height: 80px;
  color: rgba(255, 255, 255, 1);
  background-color: #000000;
}
.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}

.wuliuMes {
  padding: 32px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #d8d8d8;
}

.inputBox {
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
}

.inputTit {
  color: #333333;
  font-size: 24px;
  width: 210px;
  line-height: 24px;
}
.inputCell {
  flex: 1;
  height: 50px;
  border-width: 1px;
  border-color: #cdcdcd;
  border-style: solid;
  border-radius: 4px;
  padding-left: 20px;
}
</style>